<template>
	<div>
		<div class="container">
			<router-link to="/hs/a">a</router-link>
			<!-- <router-link to="/hs/b/2">b</router-link> -->
			<router-view></router-view>
			<div class="tc">
				<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

				<el-dialog
					title="上传输出数据"
					:visible.sync="dialogVisible"
					width="615px"
					:before-close="handleClose"
				>
					<div class="upload-content">
						<!-- upload 表格 -->
						<div class="upload-table">
							<p>上传结构化数据表：</p>
							<div>
								<!--  action="https://jsonplaceholder.typicode.com/posts/" -->
								<!-- :file-list="fileList" -->
								<el-upload
									class="upload-demo"
									:on-preview="handlePreview"
									:on-remove="handleRemove"
									list-type="picture"
									action="https://jsonplaceholder.typicode.com/posts/"
								>
									<el-button> <img src="../assets/images/u2437.png" alt />点击上传 </el-button>
									<div slot="tip" class="el-upload__tip">
										支持扩展名：.rar .zip .doc .docx .pdf .jpg...
									</div>
								</el-upload>
							</div>
						</div>
						<!-- upload 数据 -->
						<div class="upload-table mt50">
							<p>上传非结构化数据：</p>
							<div>
								<!--  action="https://jsonplaceholder.typicode.com/posts/" -->
								<!-- :file-list="fileList" -->

								<!-- 上传文件 -->
								<!-- :on-preview="handlePictureCardPreview" ：图片预览的 -->
								<el-upload
									width="100px"
									action="https://jsonplaceholder.typicode.com/posts/"
									list-type="picture-card"
									:on-remove="handleRemove2"
								>
									<i class="el-icon-plus"></i>
								</el-upload>

								<!-- 图片预览的 -->
								<!-- <el-dialog :visible.sync="dialogVisibleF">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>-->
							</div>
						</div>
					</div>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>

		<!-- 步骤条 -->
		<div style="height: 300px">
			<el-steps direction="vertical" :active="1">
				<el-step title="步骤 1">1</el-step>
				<el-step title="步骤 2">2</el-step>
				<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字">4</el-step>
			</el-steps>
		</div>
		<div>1</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				fileList: [
					{
						name: 'food.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					},
					{
						name: 'food2.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					}
				],
				dialogImageUrl: '',
				dialogVisibleF: false
			}
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(() => {
						done()
					})
					.catch(() => {})
			},
			handleRemove2(file, fileList) {
				console.log(file, fileList)
			},
			handlePreview(file) {
				console.log(file)
			},
			handleRemove(file, fileList) {
				console.log(file, fileList)
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url
				this.dialogVisibleF = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import "../css/tc.scss";
	// 上传输出数据
	.mt50 {
		margin-top: 50px;
	}

	.upload-content {
		// border: 1px solid #333;
		// height: 400px;
		.upload-table {
			display: flex;
			> p {
				line-height: 40px;
				color: rgba($color: #000000, $alpha: 0.85);
				font-weight: 400;
			}
			> div {
				img {
					width: 14px;
					margin-right: 10px;
				}
			}
		}
	}
</style>
